<template>
  <!--------------------- 我的团队列表 --------------------
* @auto kyle
* @date 2020-12-20
  -->
  <div class="pos-r flex bg-white ptb-32 plr-24 br-8 mb-24" @click="click(data)">
    <headPortrait-box
      class="img-box pos-r br-full is-80 flex-s-0"
      :head-portrait-url="data.Face"
    />
    <div class="flex-1 mlr-28">
      <p class="fs-28 ">
        <span class="fw-b fs-32">{{ data.Name }}</span>
        <span v-if="data.GradesName" class="level fs-20 bg-second">{{ data.GradesName }}</span>
      </p>
      <p class="color-gray">手机：{{ data.ContactTel }}</p>
      <p class="color-gray">上级：{{ data.TeamParentName }}</p>
    </div>
    <div class="flex-s-0 tac">
      <p class=" fs-40" :class="data.ProductBuyCount>0?'color-primary':'color-gray-light'">{{ data.ProductBuyCount||0 }}</p>
      <p v-if="data.ProductBuyCount&&data.ProductBuyCount>0" class="color-gray">已下单</p>
      <p v-else class="color-gray-light">未下单</p>
    </div>
  </div>
</template>

<script>
import headPortraitBox from 'components/headPortraitBox'
export default {
  name: 'TeamItem',
  components: { headPortraitBox },
  props: {
    data: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      headUrl: ''
    }
  },

  computed: {

  },
  methods: {
    click(data) {
      this.$emit('click', data)
    }
  }
}
</script>
<style lang="scss" scoped>
  .level{
    font-size: 20px;
    color: #fff;
    margin-left: 10px;
    padding: 2px 8px ;
    border-radius: 40px 40px 40px 0;
  }
</style>

